<template>
    <div class="login-page">
        <TopComponent></TopComponent>
        <div class="register-main">
            <h1 class="register-title">欢迎注册</h1>
            <div class="register-form">
                <div class="form-item">
                    <span class="name">国籍：</span>
                    <select name="nationCode" placeholder="请选择" class="input">
                        <option value="86">中国 86</option>
                        <option value="852">中国香港 852</option>
                        <option value="886">中国台湾 886</option>
                        <option value="853">中国澳门 883</option>
                        <option value="65">新加坡 65</option>
                        <option value="60"> 马来西亚 60</option>
                        <option value="84">越南 84</option>
                        <option value="82">韩国 82</option>
                        <option value="234">尼日利亚 234</option>
                        <option value="27">南非 27</option>
                    </select>
                </div>
                <div class="form-item">
                    <span class="name">手机：</span>
                    <input type="text" placeholder="请输入手机号" class="input" name="mobile">
                </div>
                <!--<span class="error-tip" style="display: block" id="mobile">{{msg}}</span>-->
                <div class="form-item">
                    <span class="name">验证码：</span>
                    <input type="text" placeholder="请输入验证码" maxlength="6" class="input" name="cmscode" style="width: 1.7rem">
                    <button type="button" class="authcode disable" @click="sendMsg()">获取验证码</button>
                </div>
                <!--<span class="error-tip" style="display: none" id="cmscode">{{msg}}</span>-->
                <div class="form-item">
                    <span class="name">密码：</span>
                    <input type="password" placeholder="8-16位,数字和字母组成" class="input" name="password">
                </div>
                <!--<span class="error-tip" style="display: none" id="password">{{msg}}</span>-->
                <div class="form-item">
                    <span class="name">确认密码：</span>
                    <input type="password" placeholder="请再次输入密码" class="input" name="repassword">
                </div>
                <!--<span class="error-tip" style="display: none" id="repassword">{{msg}}</span>-->
                <div class="form-item">
                    <span class="name">邀请码：</span>
                    <input type="text" placeholder="必填" class="input" name="yqcode">
                </div>
                <!--<span class="error-tip" style="display: none" id="yqcode">{{msg}}</span>-->
                <div class="form-btn" @click="regist()">立即注册</div>
            </div>
            <!--<div class="toastcover">-->
                <!--<span class="toast">{{msg}}</span>-->
            <!--</div>-->
            <Toast :msg="msg" v-if="this.msg!=''" :class="opacity" @toast="square"></Toast>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    import {site,key} from '../../assets/js/site.js'
    import md5 from 'md5';
    import sha1 from 'sha1';
    import Toast from '../../element/toast'
    export default {
        name: 'register',
        components: {Toast},
        data(){
            return{
                wait:60,
                msg: '',
                regxuser: /^[a-zA-Z0-9_@]{4,16}$/,
                regxpwd: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
                regmobile: /^[1][0-9]{10}$/

            }
        },
        mounted() {
            $("input").focus(function(){
                $(".error-tip").css("display","none");
            });
        },
        computed: {
            opacity () {
                return {
                    opacity: this.msg != '',
                }
            }
        },
        methods:{
            square (v) {
                this.msg = v
            },
            sendMsg(){
                var th = this;
                // var codeType = document.getElementsByName('nationCode')[0].value=='86'?1:2;
                var codeType = $("select[name='nationCode']").val()=='86'?1:2;
                var tel = $("input[name='mobile']").val();
                var telre = /^[1][0-9]{10}$/;
                if(tel === ''){
                    // $("#mobile").css('display','block')
                    th.msg='请输入手机号'
                    return
                }
                if(telre.test(tel)){
                    var type = 1;
                    var info = {
                        mobileType:codeType,
                        tel:tel,
                        type:type,
                        token:sha1(codeType +tel +
                            type   + key)
                    };
                    $.ajax({
                        type: "POST",
                        url: "http://"+site+"/index/Wallet/sendMsg",
                        data: info ,
                        dataType:"json",
                        complete:function(xhr,status){
                            plus.nativeUI.closeWaiting();
                        },
                        success:function(data,status){
                            if(data.status == 1){
                                // bus.$emit('msgChange',{value:th.$t('m.tips.regist["13"]')})
                                // th.msg = data.content;
                                $("#code").css('display','block')
                                th.msg='发送成功'
                                th.time();
                            }else{
                                $("#code").css('display','block')
                                th.msg='发送失败'
                            }
                        },
                    });
                }else{
                    $("#mobile").css('display','block')
                    th.msg='手机号不正确'
                }
            },
            time() {
                if (this.wait == 0) {
                    document.getElementsByClassName('authcode')[0].removeAttribute("disabled");
                    document.getElementsByClassName('authcode')[0].innerHTML='获取验证码';
                    this.wait = 60;
                } else {
                    document.getElementsByClassName('authcode')[0].setAttribute("disabled", true);
                    document.getElementsByClassName('authcode')[0].innerHTML=this.wait+"S后获取";
                    this.wait--;
                    var th = this;
                    setTimeout(function() {
                            th.time();
                        },
                        1000)
                }
            },
            //注册
            regist () {
                var th = this;
                if(th.regmobile.test($("input[name='mobile']").val())     &&
                    th.regxpwd.test($("input[name='password']").val())     &&
                    $("input[name='password']").val() == $("input[name='repassword']").val()   &&
                    $("input[name='yqcode']").val() != ""     &&
                    $("input[name='mobile']").val() != ""     &&
                    $("input[name='cmscode']").val() != ""     &&
                    $("input[name='password']").val() != ""){
                    var info = {
                        tel:$("input[name='mobile']").val(),
                        smscode:$("input[name='cmscode']").val(),
                        password:md5($("input[name='password']").val()),
                        repassword:md5($("input[name='repassword']").val()),
                        yqcode:$("input[name='yqcode']").val(),
                        token:sha1($("input[name='mobile']").val() +
                            $("input[name='cmscode']").val()        +
                            md5($("input[name='password']").val())   +
                            md5($("input[name='repassword']").val())   +
                            $("input[name='yqcode']").val()        + key )

                    };
                    $.ajax({
                        type: "POST",
                        url: "http://"+site+"/index/Reg/reg",
                        data: info ,
                        dataType:"json",
                        complete:function(xhr,status){
                            plus.nativeUI.closeWaiting();
                        },
                        success:function(data,status){
                            if(status=="success"){
                                // th.msg = data.msg

                                if(data.code == 1){
                                    th.msg = '注册成功!更多功能敬请期待!'
                                    setTimeout(function(){
                                        $("input").val('')
                                    },3000);
                                    var tel = $("input[name='mobile']").val();
                                    var type = 5;
                                    var info = {
                                        mobileType:1,
                                        tel:tel,
                                        type:type,
                                        token:sha1('1' + tel +
                                            type   + key)
                                    };
                                    $.ajax({
                                        type: "POST",
                                        url: "http://"+site+"/index/Wallet/sendMsg",
                                        data: info ,
                                        dataType:"json",
                                        complete:function(xhr,status){
                                            plus.nativeUI.closeWaiting();
                                        },
                                        success:function(data,status){
                                            if(data.status == 1){

                                            }
                                        },
                                    });



                                }else{
                                    th.msg = data.msg
                                }
                                // if(data.code == 1){
                                //     setTimeout(function(){
                                //         th.$router.push({path:'/'});
                                //     },200);
                                // }
                            }else{
                                th.msg = '请求超时';
                            }
                        },
                        error(status,error){
                            if(error){
                                th.msg= '系统错误';
                            }
                        },
                        beforeSend:function(){
                            //plus.nativeUI.showWaiting(th.$t('m.tips.regist["09"]'),{verticalAlign:"center"});
                        }
                    });
                }else if($("input[name='mobile']").val() == ""){
                    th.msg='请输入手机号'
                }else if(!this.regmobile.test($("input[name='mobile']").val())){
                    th.msg='手机号不正确'
                }else if($("input[name='cmscode']").val() == ""){
                    th.msg='请输入验证码'
                }else if(!this.regxpwd.test($("input[name='password']").val())){
                    th.msg='密码格式不正确'
                } else if($("input[name='password']").val() == ""){
                    th.msg='请输入密码'
                }else if($("input[name='password']").val() != $("input[name='repassword']").val()){
                    th.msg='密码不一致'
                }else if($("input[name='yqcode']").val() == ""){
                    // $("#yqcode").css('display','block')
                    th.msg='请输入邀请码'
                }
            },
        }
    }
</script>

<style lang="scss">
    .toastcover{
        position: absolute;
        top: 6rem;
        left: 50%;
        transform:translateX(-50%);
        animation:opcity-animation 1.5s ease-in-out 1;
    }
    .toast{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        color:#fff;
        height:count(30rem);
        padding-left:count(10rem);
        padding-right:count(10rem);
        border-radius: count(5rem);
        background:rgba(0,0,0,.6);
    }
    .login-page {
        min-height: 100%;
        background: url(../../assets/img/bg.png);
        background-size: 100% 100%;
    }
    .error-tip{
        font-size: 0.24rem;
        color: #e22828;
    }
    .register-main{
        width: 5.4rem;
        height: 11rem;
        position: absolute;
        top: calc(50% - 5.5rem);
        left: calc(50% - 2.7rem);
        .register-title{
            font-size: 0.48rem;
            color: #fff;
            text-align: center;
            font-weight: 400;
        }
        .register-form{
            background-color: #fff;
            width: 5.4rem;
            height: 9.4rem;
            margin: 0.48rem auto;
            border-radius: 0.2rem;
            padding: 0.4rem 0.6rem 0.56rem;
            font-size: 28px;
            color: #435069;
            .form-item {
                position: relative;
                border-bottom: 0.02rem solid #e5e5e5;
                margin-top: 0.4rem;
                white-space: nowrap;
                .name {
                    display: inline-block;
                    font-size: 0.28rem;
                    line-height: 0.38rem;
                }
                .input {
                    line-height: 0.38rem;
                    border: none;
                    outline: none;
                    font-size: 0.28rem;
                    width: 3rem;
                    background-color: transparent !important;
                    -webkit-appearance: none;
                }
                .authcode{
                    /*position: absolute;*/
                    /*right: 0;*/
                    /*bottom: 0.07rem;*/
                    width: 1.4rem;
                    text-align: center;
                    line-height: 0.34rem;
                    border: 0.02rem solid #e60816;
                    background-color: #fff;
                    border-radius: 1rem;
                    font-size: 0.24rem;
                    color: #e60816;
                }
            }
            .form-btn{
                width: 3rem;
                height: 0.6rem;
                line-height: 0.6rem;
                background-color: #e60816;
                color: #fff;
                font-size: 0.26rem;
                border-radius: 0.3rem;
                text-align: center;
                margin: 0 auto;
                margin-top: 1.2rem;
            }
        }
    }
</style>
